<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式\尺寸操作</title>
	<script src="../js/jquery-1.11.1(1).js"></script>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()               功能：
		                     1个参：传入css属性名
							 功能：获取匹配元素集合中第一个元素的css属性值
							 2个参：传入css属性名和属性值
							 功能：获取匹配元素集合中第一个元素的css属性值
							 n个参：传入多个css属性名和属性值
							 语法糖：css({"属性名"："属性值",
							 ......
							 "属性名"："属性值"
							 "属性名"："属性值",})
		 width()和height()    功能：匹配元素集合中第一个元素宽高度
		                       无参：获取匹配元素集合中第一个元素宽高度
							   有参:设置匹配元素集合中第一个元素宽高度
							   width（数值）
		 outerwidth()和outerHeight()
		 出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		 无参：获取元素的宽高度，计算盒子模型：内边距+边框
		 有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 -->
		 <style>
			 .box{
				 background: #aaaaff;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid #55ff7f;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: 700;
				 
			 }
		 </style>
	</head>
	<body>
		<!-- css: .box添加样式：背景颜色，内外边距：20px 边框5px
		          .result添加样式：上外边距：10px,字体加粗
				引入jq框架  
		 -->
		<!-- 创建两个div平行   6个按钮 -->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setbtn">设置多属性效果</button>
		<button id="gsbtn">获取元素高度/设置元素宽度</button>
		<button id="bpBtn">获取高度（内边距+边框）</button>
		<button id="bpmbtn">获取高度（内外边距+边框）</button>
		<!-- 2。结果提示功能区域 -->
		<div class="result" id="result">hhh</div>
		<script>
			/* 1.点击  获取颜色属性值 按钮 获取颜色值并打印页面上*/
			$("#getColorbtn").click(function(){
				//获取css属性值方式：传入属性名即可
				var bgColor=$(".box").css("background-color");
			    //页面上打印属性值 ？？
				$("#result").text("获取属性值是："+bgColor)
			});
			/* 2.点击  获取颜色属性值 按钮 获取颜色值并打印页面上 */
			$("#setColorbtn").click(function(){
				//改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色");
			});
			/* 3.点击 设置多属性效果  按钮  圆，背景色  阴影 */
			$("#setbtn").click(function(){
				$(".box").css({"backgr ound-color":"#f00",
				               "border":"5px solid #ff0",
							   "border-radius":"50%",
							   "width":"300px",
							   "height":"300px",
							   "box-shadow":"5px 5px 10px 2px rgba(0,0,0,0.5)",
							   "background-image":"url(../img/1.gif)",
							   "background-size":"100%"
				});
			});
			/* 4.点击  获取，设置宽度 */
			$("#gsbtn").click(function(){
				var w=$(".box").width(470);
				$("#result").text("获取宽度是："+w+"px");
			});
			/* 5.点击  获取高度  按钮   计算box空间高度 */
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
			    $("#result").text("获取高度为："+bp+"px");
			});
			$("#bpmbtn").click(function(){
				var bpm=$(".box").outerHeight(true);
			    $("#result").text("获取高度为："+bpm+"px");
			});
			
		</script>
	</body>
</html>